<!-- 弹窗 详情 -->
<script lang="tsx" setup>
import { ElDatePicker, ElSelectV2 } from "element-plus";

import type { FormDescChild } from "@/components/form-desc/form-desc.vue";
import { RISK_HAZARDS_SPECIAL_TASK_TYPE_OPTIONS } from "@/config/enum-options";
import { whManagerBsTbRiskHazardsSpecialSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { injectState } from '../state';
import { useCompanyStore } from "@/stores/company";
import { inject, ref, watch } from "vue";

defineOptions({ name: "DetailDialog" });

const companyStore = useCompanyStore();
const pageHandle = injectState()!;
const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formDescRef = shallowRef<InstanceType<GlobalComponents["FormDesc"]>>();

const dialogType = ref<"add" | "edit" | "detail" | string>();

const titleMap: Record<string, string> = {
	add: "新增",
	edit: "编辑",
	detail: "详情",
};

const beforeClose = async () => {
	if (dialogType.value !== "detail") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (type = "add", value = {} as any) => {
	dialogType.value = type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<Record<string, any>>({});

const { execute, isLoading } = useAsync(async () => {
	await formDescRef.value?.formRef?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	await whManagerBsTbRiskHazardsSpecialSaveOrUpdateUsingPost({
		data: {
			...model.value,
			enterpriseId: companyStore.currentCompanyId,
		},
	});
  pageHandle.page.execute()
	ElMessage.success("提交成功");
	dialogRef.value?.complete();
});

const children: FormDescChild[] = [
	{
		label: "作业单位",
		prop: "taskUnit",
		rule: [{ required: true, message: "请输入作业单位", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				v-model={model.value.taskUnit}
				clearable
				placeholder="请输入作业单位"
			/>
		),
		descItem: () => model.value.taskUnit || "-",
	},
	{
		label: "作业类型",
		prop: "taskType",
		rule: [{ required: true, message: "请输入作业类型", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElSelectV2
				options={[...RISK_HAZARDS_SPECIAL_TASK_TYPE_OPTIONS]}
				v-model={model.value.taskType}
				clearable
				placeholder="请输入作业类型"
			/>
		),
		descItem: () => model.value.taskType || "-",
	},
	{
		label: "作业地点",
		prop: "latitude",
		rule: [{ required: true, message: "请输入作业地点", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<div>
        <el-input
					v-model={model.value.longitude}
					clearable
					placeholder="请输入经度"
					style="width:50%;"
				/>
				<el-input
					v-model={model.value.latitude}
					clearable
					placeholder="请输入纬度"
					style="width:50%;"
				/>
      </div>
		),
		// descItem: () => model.value.longitude || "-",
    descItem: () => {
      return (
        "经度"+model.value.longitude+"纬度"+model.value.latitude
      )
    }
	},
	{
		label: "上报时间",
		prop: "reportTime",
		rule: [{ required: true, message: "请输入上报时间", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElDatePicker
				type="datetime"
				class="w-100%!"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				v-model={model.value.reportTime}
				clearable
				placeholder="请输入上报时间"
			/>
		),
		descItem: () => model.value.reportTime || "-",
	},
	{
		label: "实施时间",
		prop: "handleTime",
		rule: [{ required: true, message: "请输入实施时间", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<ElDatePicker
				type="datetime"
				class="w-100%!"
				valueFormat="YYYY-MM-DD HH:mm:ss"
				v-model={model.value.handleTime}
				clearable
				placeholder="请输入实施时间"
			/>
		),
		descItem: () => model.value.handleTime || "-",
	},
	{
		label: "现场作业人员",
		prop: "sceneMaster",
		rule: [{ required: true, message: "请输入现场作业人员", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				v-model={model.value.sceneMaster}
				clearable
				placeholder="请输入现场作业人员"
			/>
		),
		descItem: () => model.value.sceneMaster || "-",
	},
	{
		label: "作业负责人",
		prop: "taskMaster",
		rule: [{ required: true, message: "请输入作业负责人", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				v-model={model.value.taskMaster}
				clearable
				placeholder="请输入作业负责人"
			/>
		),
		descItem: () => model.value.taskMaster || "-",
	},
	{
		label: "验收人员",
		prop: "acceptance",
		rule: [{ required: true, message: "请输入验收人员", trigger: "blur" }],
		span: 1,
		formItem: () => (
			<el-input
				v-model={model.value.acceptance}
				clearable
				placeholder="请输入验收人员"
			/>
		),
		descItem: () => model.value.acceptance || "-",
	},
	{
		label: "主要安全措施",
		prop: "handleDesc",
		rule: [{ required: true, message: "请输入主要安全措施", trigger: "blur" }],
		span: 2,
		formItem: () => (
			<el-input
				v-model={model.value.handleDesc}
				type="textarea"
				rows={4}
				clearable
				placeholder="请输入主要安全措施"
			/>
		),
		descItem: () => model.value.handleDesc || "-",
	},
];
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="titleMap[dialogType!]"
		:before-close="beforeClose"
		w="707px!"
	>
		<el-scrollbar h="500px!" m="r--20px" p="r-20px">
			<FormDesc
				ref="formDescRef"
				:type="dialogType === 'detail' ? 'desc' : 'form'"
				form-class="gap-x-20px"
				:model="model"
				:children="children"
				:column="2"
			/>
		</el-scrollbar>
		<template v-if="dialogType !== 'detail'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>
